<template>
  <div>
    <div class="advanticements" v-for="(item,index) in adList">
      <img v-lazy="item.src" alt="">
      <div class="adTitle">
        {{item.title}}
        <div class="btns">
					<span v-for="oitem in item.category">
						{{oitem.name}}
					</span>
        </div>
      </div>
    </div>
    <div class="advanticements" v-for="(item,index) in superLists">
      <img v-lazy="item.src" alt="">
      <div class="listTitle">
        {{item.title}}
      </div>
      <div class="listText" :class="{tcolor:index==1}">
        {{item.text.split("*")[0]}}<br>
        {{item.text.split("*")[1]}}<br>
        {{item.text.split("*")[2]}}
      </div>
    </div>
  </div>
</template>

<script>
  export default({
    data () {
      return {
        adList: [
          {
            title: "商超解决方案",
            src: require("../assets/superSolution.png"),
            category: [
              {name: "联屏广告"},
              {name: "异形广告"},
              {name: "竖屏广告"},
              {name: "第三方接口对接"}
            ]
          }
        ],
        superLists: [
          {
            title: "云端制作",
            src: require("../assets/superCloudMaking.jpg"),
            text: "基于云端的节目制作和发布，特别适合连锁行业的总部直控需求，*缩减了中间环节。"
          },
          {
            title: "多屏联动",
            src: require("../assets/superMulti.jpg"),
            text: "可以随意组合（横排、竖排、异形）的屏幕样式可以带来更好的视觉体验，*也可以视实际空间大小灵活放置。"
          },
          {
            title: "第三方信息接入",
            src: require("../assets/superThirdParty.jpg"),
            text: "对接金价、汇率等信息，满足不同客户的需求。"
          }
        ]
      }
    }
  })
</script>

<style scoped>
  .advanticements {
    width: 85%;
    background: #ccc;
    position: relative;
    margin: 0 auto;
  }

  .advanticements > img {
    width: 100%;
    display: block;
    margin: 0 auto;
  }

  .adTitle, .listTitle, .listText {
    width: 100%;
    position: absolute;
    top: 5%;
    text-align: center;
    font-size: 36px;
    color: #3573b9;
  }

  .listTitle {
    width: auto;
    display: inline;
    margin: 5% 20%;
  }

  .listText {
    width: auto;
    display: inline;
    font-size: 18px;
    color: #000;
    text-align: left;
    margin: 8% 20%;
  }

  .btns > span {
    display: inline-block;
    color: white;
    text-align: center;
    font-family: "微软雅黑";
    font-size: 18px;
    background: #7bbbe7;
    border-radius: 4px;
    margin: 24px 20px;
    padding: 5px 5px;
    cursor: default;
  }

  @media screen and (max-width: 1600px) {
    .listText {
      margin: 10% 20%;
    }
  }

  .tcolor{
    color:#fff !important;
  }
</style>
